<template>
  <div>
    <div class="flex">
      <zbStore ref="storeRef" @initStore="initStore" @selStore="selStore" />
      <div class="flex1" style="width: 60%">
        <zbTable
          v-if="storeId"
          ref="tableRef"
          :api-fun="get_list"
          :store_code="storeId"
          @getselection="getselection"
          @action="action"
        >
          <template #toolbar>
            <a-space>
              <template v-if="delArrShow">
                <a-button class="ele-btn-icon" @click="delArrHide()"
                  ><span>取消</span></a-button
                >
                <a-button
                  type="primary"
                  danger
                  ghost
                  class="ele-btn-icon"
                  @click="delArrFun()"
                  ><span>确认删除</span></a-button
                >
              </template>
            </a-space>
          </template>
        </zbTable>
      </div>
    </div>
    <!-- 新建/编辑 弹窗 -->
    <user-edit
      v-if="showEdit"
      v-model:visible="showEdit"
      :actionStatus="actionStatus"
      :editDataId="editDataId"
      :storeId="storeId"
      @done="done"
    />
    <!-- 回收站弹窗 -->
    <recycle
      v-if="showRecycle"
      v-model:visible="showRecycle"
      @done="reloadTable"
    />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
      ><p>删除后请在回收站内恢复</p></a-modal
    >
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import zbTable from '@/components/zbTable/storeCodeIndex.vue';
  import { message } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import userEdit from './components/user-edit.vue';
  import recycle from './components/recycle.vue';
  import { get_list, delOpt } from '@/api/setting/pay_type';

  const loading = ref(false);
  // 是否显示编辑弹窗
  const showEdit = ref(false);
  // 编辑数据
  const editDataId = ref(null);
  // 编辑按钮数据
  const actionData = ref({});
  const actionStatus = ref('add');
  const popconfirm = ref(false);
  const delArrShow = ref(false); //批量删除确认弹框
  const delArrData = ref([]); //批量删除的id
  const showRecycle = ref(false);
  const storeId = ref(null);

  // 获取子组件
  const tableRef = ref(null);

  const initStore = (val) => {
    storeId.value = String(val.code);
    tableRef?.value?.changeStoreCode(storeId.value);
  };
  const selStore = (val) => {
    storeId.value = String(val.code);
    tableRef?.value?.changeStoreCode(storeId.value);
  };

  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
    popconfirm.value = false;
    tableRef.value.reload();
  };

  //单个删除
  const delFun = () => {
    delOpt({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  const delArrHide = () => {
    tableRef.value.changeSelection(false);
    delArrShow.value = false;
  };
  const delArrOpt = () => {
    tableRef.value.changeSelection(true);
    delArrShow.value = true;
  };
  //批量删除
  const delArrFun = () => {
    delOpt({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        delArrHide();
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  //获取选中的行
  const getselection = (val) => {
    delArrData.value = [];
    val.value.map((item) => {
      delArrData.value.push(item.id);
    });
  };

  const action = (data) => {
    if (data.action_data.type == 'add') {
      if (!storeId.value) {
        return message.error('请先选择门店');
      }
      editDataId.value = '';
      showEdit.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: data.row_data.url };
    }
    if (data.action_data.type == 'recycling') {
      showRecycle.value = true;
    }
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      editDataId.value = data.row_data.id;
      actionStatus.value = 'edit';
      actionData.value = { url: data.action_data.url };
    }
    if (data.action_data.type == 'delete') {
      if (data.action_data.mold == 'more') {
        delArrOpt();
      } else {
        delArrData.value = [];
        delArrData.value.push(data.row_data.id);
        popconfirm.value = true;
      }
    }
  };
</script>
